<template>
    <div class="setOrder">
      <div class="userInfo">
        <p class="orderNav">
          <strong>用户姓名：</strong>{{user.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <strong>收货地址：</strong>{{user.address}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <strong>订单金额：</strong>￥{{TotalPrice}}元
        </p>
      </div>
    <hr style="width:60%;">
    <div class="orderShow">
      <el-table ref="multipleTable" :data="multipleSelection" tooltip-effect="dark" style="width:60% ;margin:0 auto">
        <el-table-column prop="product.imgPath" label="图片" width="100">
          <template slot-scope="scope">
            <img :src="'/products/' +scope.row.product.imgPath " alt="" width="100%">
          </template>
        </el-table-column>
        <el-table-column prop="product.productName" label="名称" width="290">
        </el-table-column>
        <el-table-column prop="product.type" label="类型" width="150">
        </el-table-column>
        <el-table-column prop="product.price" label="单价" width="200">
        </el-table-column>
        <el-table-column prop="num" label="数量" width="150">
        </el-table-column>
      </el-table>
    </div>
      <div style="margin-left: 20%;margin-top: 2%;">
        <el-button type="primary" @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="addOrder">提交订单</el-button>
      </div>
    </div>
</template>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .orderNav{
    width: 50%;
    margin-left: 20%;
  }
  .orderShow{
    width: 100%;
    
  }
  .setOrder{
    width: 100%;
  }
</style>

<script>
  export default {
    name: 'setOrder',
    data() {
      return {
        user:{},
        multipleSelection:[]
      }
    },
    created(){
      this.multipleSelection = JSON.parse(this.$route.query.data)
      this.user =JSON.parse(localStorage.getItem('currentUser'))
    },
    methods:{
      addOrder(){
        //获取当前订单总价
        let totalPrice = this.TotalPrice
        let ids =this.multipleSelection.map(item => {
          return item._id
        })
        //获取所有下单商品的具体内容
        let products =this.multipleSelection.map(item => {
          item.product.num = item.num
          return item.product
        })
        this.axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
        this.axios.post('/api/addOrder',
        {order:{products,totalPrice}})
          .then(res => {
            let orderId = res.data.data
            this.$message('订单提交成功！')
            this.axios.delete('/api/deleteCarts',{params:{ids}})
            .then(res =>{
              console.log('购物车记录已清除')
              this.$router.push({path:'pay',query:{data:totalPrice,orderId:orderId}})
            })
          })
          .catch(err => {
            this.$message('订单提交失败！')
          })
      }
    },
    computed: {
    TotalPrice(){
      let total = 0
      this.multipleSelection.map(item => {
        total += parseInt(item.product.price) * parseInt(item.num)
      })
      return total
    }
  }}
</script>